<template>

  <el-form :inline="true" :model="info" class="demo-form-inline" style="margin-bottom: 10px;">
    <el-form-item>
      <el-input v-model="info.roleNameNo" placeholder="请输入角色名称/编号" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="GetRole">查询</el-button>
      <el-button @click="()=>{info.roleNameNo=''}">重置</el-button>
    </el-form-item>
  </el-form>
  <el-form-item>
    <el-button type="success" @click="OpenAdd">新增</el-button>
  </el-form-item>
  <el-table :data="role.a" border style="width: 100%;height: 500px;">
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column prop="roleName" label="角色名称" />
    <el-table-column prop="roleNo" label="角色编号" />
    <el-table-column prop="roleStatus" label="状态" >
        <template v-slot="scope">
            <el-tag type="primary" v-if="scope.row.roleStatus==true">启用</el-tag>
            <el-tag type="info" v-else>禁用</el-tag>
        </template>
    </el-table-column>
    <el-table-column prop="roleDescription" label="备注" />
    <el-table-column prop="" label="操作" >
        <template v-slot="scope">
            <el-button type="primary" link @click="OpenEdit(scope.row)">编辑</el-button>
            <el-button type="danger" link v-if="scope.row.roleStatus" @click="ToggleEnable(scope.row)">禁用</el-button>
            <el-button type="success" link v-else @click="ToggleEnable(scope.row)">启用</el-button>
            <el-button type="danger" link @click="DeleteRole(scope.row)">删除</el-button>
        </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="addDialogVisible" :title="dialogTitle" width="520px">
    <el-form :model="addForm" label-width="96px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="addForm.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="角色编号" prop="roleNo">
        <el-input v-model="addForm.roleNo" placeholder="请输入角色编号" :disabled="dialogTitle==='编辑角色'" />
      </el-form-item>
      <el-form-item label="备注" prop="roleDescription">
        <el-input v-model="addForm.roleDescription" placeholder="请输入备注" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="addDialogVisible=false">取消</el-button>
      <el-button type="primary" :loading="addSubmitting" @click="dialogTitle==='编辑角色' ? UpdateRole() : AddRole()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {useCounterStore} from '@/stores/counter'
// @ts-ignore
 import { getReadClient, getWriteClient } from '@/Urls/AxiosHelper'
const store=useCounterStore();
const read = getReadClient(0)
const write = getWriteClient(0)
let role:any=reactive({
    a:[]
})
let info:any=reactive({
    roleNameNo:''
})
const addDialogVisible = ref(false)
const addSubmitting = ref(false)
const dialogTitle = ref('新增角色')
let addForm:any = reactive({
    id:'',
  roleNo:'',
  roleName:'',
  roleDescription:''
})
const GetRole=()=>{
    read({
        url:'sysread/api/Role/GetRole',
        method:'get',
        params:{
            RoleNameNo: info.roleNameNo
        }
    })
    .then((res:any)=>{
        role.a = res?.data?.data || []
    })
    .catch((err)=>{ ElMessage.error('查询失败') })
}
const OpenAdd=()=>{
  dialogTitle.value = '新增角色'
  addForm.roleNo=''
  addForm.roleName=''
  addForm.roleDescription=''
  addDialogVisible.value=true
}
const AddRole=()=>{
  if(!addForm.roleName){ return ElMessage.warning('请输入角色名称') }
  if(!addForm.roleNo){ return ElMessage.warning('请输入角色编号') }
  addSubmitting.value = true
  write({
    url:'syswrite/api/Role/AddRole',
    method:'post',
    data:addForm
  }).then((res:any)=>{
    if(res?.data?.code===200){
      ElMessage.success('新增成功')
      addDialogVisible.value=false
      GetRole()
    }else{
      ElMessage.error(res?.data?.message||'新增失败')
    }
  }).finally(()=>{ addSubmitting.value=false })
}

const OpenEdit = (row:any)=>{
  dialogTitle.value = '编辑角色'
  addForm.id=row.id||''
  addForm.roleNo = row.roleNo || ''
  addForm.roleName = row.roleName || ''
  addForm.roleDescription = row.roleDescription || ''
  ;(addForm as any).id = row.id
  addDialogVisible.value = true
}

const UpdateRole = ()=>{
  if(!addForm.id){ return ElMessage.error('缺少角色ID') }
  if(!addForm.roleName){ return ElMessage.warning('请输入角色名称') }
  if(!addForm.roleNo){ return ElMessage.warning('请输入角色编号') }
  addSubmitting.value = true
  write({
    url:'syswrite/api/Role/UpdateRole',
    method:'post',
    data:addForm
  }).then((res:any)=>{
    if(res?.data?.code===200){
      ElMessage.success(res.data.message)
      addDialogVisible.value=false
      GetRole()
    }else{
      ElMessage.error(res?.data?.message||'更新失败')
    }
  }).finally(()=>{ addSubmitting.value=false })
}

const DeleteRole = (row:any)=>{
  ElMessageBox.confirm(`确定删除角色"${row.roleName}"吗？`, '删除确认', {
    type: 'warning',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
  }).then(()=>{
    write({
      url:'syswrite/api/Role/DeleteRole',
      method:'post',
      params:{
        Id:row.id
      }
    }).then((res:any)=>{
      if(res?.data?.code===200){
        ElMessage.success(res.data.message)
        GetRole()
      }else{
        ElMessage.error(res?.data?.message||'删除失败')
      }
    })
  }).catch(()=>{})
}

// 启用/禁用切换：后端提供 EnableRole（推断为切换）
const ToggleEnable = (row:any)=>{
  write({
    url:'syswrite/api/Role/EnableRole',
    method:'post',
    params:{ Id: row.id }
  }).then((res:any)=>{
    if(res?.data?.code===200){
      ElMessage.success(res.data.message)
      GetRole()
    }else{
      ElMessage.error(res?.data?.message||'操作失败')
    }
  })
}
onMounted(()=>{
    GetRole();
})
</script>

